<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket示例</title>
    <style>
        /* 简单的样式，让消息显示区域更美观 */
        #message-display {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
            max-height: 600px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<!-- 添加文本输入框，用于用户输入消息，其 id 为 message -->
<label for="message"></label><input type="text" id="message" placeholder="输入要发送的消息">

<!-- 添加发送按钮，点击时调用 sendMessage 函数 -->
<button onclick="sendMessage()">发送</button>

<!-- 用于显示接收到的消息 -->
<div id="message-display"></div>

</body>
</html>

<script>
    const socket = new WebSocket('ws://localhost:8402/ws');

    socket.onopen = function () {
        console.log('WebSocket连接已建立');
    };

    socket.onmessage = function (event) {
        console.log('收到消息: ' + event.data);
        // 获取消息显示区域的 DOM 元素
        const messageDisplay = document.getElementById('message-display');
        // 创建一个新的段落元素
        const newMessage = document.createElement('p');
        // 将接收到的消息内容设置为段落元素的文本
        newMessage.textContent = event.data;
        // 将新的段落元素添加到消息显示区域
        messageDisplay.appendChild(newMessage);
    };

    socket.onclose = function (event) {
        console.log('WebSocket连接已关闭，代码: ' + event.code);
    };

    socket.onerror = function (error) {
        console.error('WebSocket错误: ' + error);
    };

    // 发送消息
    function sendMessage() {
        // 检查消息是否为空，不为空则发送
        const message = document.getElementById('message').value;
        if (message) {
            socket.send(message);
            document.getElementById('message').value = '';// 清空消息框
        }
    }

</script>